<div id="ell">
<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="id"
      label="ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column label="操作">
      <template v-slot="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<script>
$(document).ready(function(){
    new Vue({
        el:"#ell",
        data() {
            return {
                tableData: <?=json_encode($result)?>
            }
        },
        methods: {
            handleDelete(rowIndex, row) {
                var self = this;
                
                self.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/admin/index/delete?id="+row.id, function(res){
                        if(res.messages.length>0) {
                            const h = self.$createElement;
                            var message = h("ul", null, res.messages.map(function(v){
                                return h("li",null,v)    
                            }))
                            
                            self.$alert(message, '错误提示', {
                                confirmButtonText: '确定'
                            });   
                        }
                        else {
                            self.$delete(self.tableData,rowIndex)  
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                        }
                    },"json")
                });    
                
                
            }
        }  
    })
})
</script>

